<!-- API检测 -->
<template>
  <div>
    <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/SoftwareApi' }">软件信息</el-breadcrumb-item>
          <el-breadcrumb-item>API性能检测</el-breadcrumb-item>
        </el-breadcrumb>
    </div> 
    <div class="content">
      <el-card>
        <div slot="header" class="dictionaryCardTitle">
          <p style="width:80px;text-align: center;">接口设置</p>
          <div class="dictiomarySelectDiv">
            <div class="selectName" style="margin-left:5px;"><p style="text-align: center;">接口名称</p><el-input placeholder="请输入接口名称"></el-input></div>
            <div class="selectName"><p style="text-align: center;">接口类型</p><el-input placeholder="请输入接口类型"></el-input></div>
            <div class="selectName">
              <p style="text-align: center;">接口状态</p>
              <el-select placeholder="接口状态" style="margin-left:10px;">
                <el-option label="正常" value="shanghai"></el-option>
                <el-option label="异常" value="beijing"></el-option>
              </el-select>
            </div>
            <div class="selectButton">
              <el-button type="primary" icon="el-icon-search" circle></el-button>
            </div>
          </div>
        </div>
        <div class="tableView">
          <el-table :data="dicData" :fit="true" border>
            <el-table-column label="接口编号" prop="id" :width="flexColumnWidth('id',dicData)"></el-table-column>
            <el-table-column label="接口名称" prop="name" :width="flexColumnWidth('name',dicData)"></el-table-column>
            <el-table-column label="接口地址" prop="type" :width="flexColumnWidth('type',dicData)"></el-table-column>
            <el-table-column label="状态">
              <div slot-scope="scope">
                <el-tag type="success">{{scope.row.state}}</el-tag>
              </div>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :width="flexColumnWidth('remark',dicData)">
            </el-table-column>
            <el-table-column label="创建时间" prop="create" :width="flexColumnWidth('create',dicData)"></el-table-column>
            <el-table-column label="操作">
                <div slot-scope="scope">
                  <el-button type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </div>
            </el-table-column>
          </el-table>
            <el-pagination style="margin-top:20px;"
               background
               layout="prev, pager, next"
               :total="totalPage">
            </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
    
export default({
  methods: {
    flexColumnWidth(str, arr1, flag = 'max') {
      // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
      // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
      // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
      str = str + ''
      let columnContent = ''
      if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
        return
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return
      }
      if (flag === 'equal') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str].length > 0) {
            // console.log('该列数据[0]:', arr1[0][str])
            columnContent = arr1[i][str]
            break
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0
        for (let i = 0; i < arr1.length; i++) {
          if (arr1[i][str] === null) {
            return
          }
          const now_temp = arr1[i][str] + ''
          const max_temp = arr1[index][str] + ''
          if (now_temp.length > max_temp.length) {
            index = i
          }
        }
        columnContent = arr1[index][str]
      }
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 0
      for (const char of columnContent) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 8
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 20
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 15
        }
      }
      if (flexWidth < 80) {
        // 设置最小宽度
        flexWidth = 100
      }
      // if (flexWidth > 250) {
      //   // 设置最大宽度
      //   flexWidth = 250
      // }
      return flexWidth + 'px'
    }
  },
  data() {
    return {
      dicData: [{
        id:'1',
        name:"获取院校信息",
        type:"https://cha.ebaitian.cn",
        state:"正常",
        remark:"获取考研院校信息",
        create:"2021-09-10"
      },{
        id:'2',
        name:"用户登录",
        type:"http://localhost:8181/users/login",
        state:"正常",
        remark:"获取用户信息并做登录验证",
        create:"2021-10-10"
      }],
      totalPage:10
    }
  },
})
</script>
    
<style scoped>
.dictiomarySelectDiv .el-input{
width: 160px;
min-width: 160px;
margin-left: 10px;
}
.dictiomarySelectDiv .el-select{
min-width: 160px;
}
.dictionaryCardTitle{
display: flex;
width: 100%;
justify-content: center;
flex-direction: column;
font-weight: 600;
}
.dictiomarySelectDiv{
width: 100%;
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
.selectName{
display: flex;
margin-left: 8px;
align-items: center;
}
.selectName p{
min-width: 70px;
}
.selectButton{
margin-left: 30px;
}
.tableView{
min-width: 100%;
}
</style>